<template>
    <div class="special">
        <header>
            <van-icon name="arrow-left" @click="back"/>
            <span>题库选择</span>
            <div></div>
        </header>
        <div>
            <van-search v-model="value" shape="round" background="#FFFFFF" placeholder="请输入题库名称关键字"/>
        </div>
        <div class="bao">
            <div class="bao-left">
                <van-sidebar v-model="activeKey" @change="OnClick">
                    <van-sidebar-item
                            v-for="(item,index) in list"
                            :key="index"
                            :title="item.name"
                    />
                </van-sidebar>
            </div>
            <div class="you">
                <div v-for="(item,index) in right" :key="index" class="you-item">
                    <p>{{item.name}}</p>
                    <div v-for="(subItem,subIndex) in item.bank" :key="subIndex" @click="goTi(subItem)">
                        {{subItem.name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: "",
                list: [],
                right: [],
                activeKey: 0
            };
        },
        methods: {
            OnClick(index) {
                this.right = []
                let {id} = this.list[this.activeKey];
                // console.log(id)
                this.$HTTP.ques(id).then(res => {
                    this.right = res.data.data
                })
            },
            //回退
            back() {
                window.history.back()
            },
            //去做题
            goTi(item) {
                let items = item
                this.$router.push({
                    path: '/point',
                    query: {
                        classify_id:items.classify_id,
                        id:item.id
                    }
                })
            }

        },
        created() {
            this.$HTTP.detailw().then((res) => {
                this.list = res.data.data
                let {id} = this.list[this.activeKey];
                // console.log(id)
                this.$HTTP.ques(id).then(res => {
                    this.right = res.data.data
                })
            });
        },
    };
</script>

<style scoped lang="scss">
    header {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        font-size: 4vw;
        top: 0;
        height: 11.73333vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 9;
        background: #fff;
        border-bottom: 1px solid #f0f2f5;

        span {
            width: 70%;
            text-align: center;
        }
    }

    .van-cell {
        height: 10vw;
    }

    .van-nav-bar {
        height: 5vw;
        padding-bottom: 2vw;
    }

    .special {
        background-color: #fff;
        height: 175vw;
        width: 100%;
    }

    .special /deep/ .van-nav-bar__title {
        font-size: 5vw !important;
    }

    .van-search__content {
        height: 10vw;

    }

    .van-sidebar-item {
        font-size: 2.6vw;
    }

    .bao /deep/ .van-sidebar {
        width: 20vw;

    }

    .bao .bao-left {
        height: 160vw;
        background-color: #F7F8FA;
    }

    .van-cell {
        line-height: 8.4vw;
        font-size: 4vw;
    }

    .van-sidebar-item {
        height: 14vw;
        font-size: 4vw;
        line-height: 10vw;
    }

    .van-sidebar-item--select::before {
        height: 8vw;
    }

    .special /deep/ .van-nav-bar__left {
        font-size: 5vw;
    }

    .you {
        width: 80%;
        height: 98vw;
        font-size: 3.56vw;
        background-color: white;

        div {
            p {
                width: 20vw;
                padding: 2vw;
                text-align: center;
            }

            > div {
                text-align: center;
                padding: 2vw;
                line-height: 4vw;
                margin-left: 6vw;
                width: 24vw;
                background: #eaeaea;
            }
        }
    }

    .bao {
        display: flex;
    }
</style>


